
<template>
  <a-card :bordered="false">

    <div class="table-operator">
        <a-button type="primary" style="margin-right:20px;">
            新建课程
        </a-button>
      <!-- <router-link :to="{path:'/educationalCenter/student/sendMessage'}"> -->
      <a-button>购买商城二维码</a-button>
      <!-- </router-link> -->
    </div>
    <!-- <a-alert type="warning" message="温馨提示：为了缩短导出时间，建议您提前对上课记录进行筛选" banner class="expand_warning" /> -->
    <s-table
      :columns="columns"
      :data="loadData"
      :scroll="{ x: 2000 }"
      class="user_management_table"
      style="margin-top:20px;"
    >
      <a slot="no" slot-scope="text,record" @click="nowClick(record)">{{text}}</a>
      <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
    </s-table>
    <create-form ref="createModal" @ok="handleOk" />
    <!-- <step-by-step-modal ref="modal" @ok="handleOk" /> -->
  </a-card>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
// import StepByStepModal from '../../list/modules/StepByStepModal'
import CreateForm from '../../list/modules/CreateForm'
import { getRoleList, getServiceList } from '@/api/manage'

const statusMap = {
  0: {
    status: 'default',
    text: '关闭'
  },
  1: {
    status: 'processing',
    text: '运行中'
  },
  2: {
    status: 'success',
    text: '已上线'
  },
  3: {
    status: 'error',
    text: '异常'
  }
}

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm
    // StepByStepModal
  },
  data() {
    return {
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'no',
          width: 150,
          fixed: 'left',
          align: 'center',
          scopedSlots: { customRender: 'no' }
        },
        {
          title: '人脸',
          dataIndex: 'face',
          align: 'center'
        },
        {
          title: '购买课时',
          dataIndex: 'description',
          align: 'center' //  scopedSlots: { customRender: 'actions' },
        },
        {
          title: '赠送课时',
          dataIndex: 'callNo',
          align: 'center'
        },
        {
          title: '已消耗课时',
          dataIndex: 'status',
          align: 'center'
        },
        {
          title: '课消金额',
          dataIndex: 'spendMoneyClass',
          align: 'center'
        },
        {
          title: '剩余课时',
          dataIndex: 'remainingClass',
          align: 'center'
        },
        {
          title: '缺课次数',
          dataIndex: 'updatedAt',
          align: 'center'
        },
        {
          title: '积分',
          dataIndex: 'integral',
          align: 'center'
        },
        {
          title: '年龄',
          dataIndex: 'age',
          align: 'center'
        },
        {
          title: '年级',
          dataIndex: 'grade',
          align: 'center'
        },
        {
          title: '应收合计',
        //   width: '100px',
          dataIndex: 'updatedAt',
          fixed: 'right',
          align: 'right',
          ellipsis: true,
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return getServiceList(Object.assign(parameter, this.queryParam)).then(res => {
          return res.result
        })
      }
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  created() {
    // this.tableOption()
    getRoleList({ t: new Date() })
  },
  methods: {
    nowClick(e) {
      this.$log(e)
      this.$router.push({ name: 'studentInfo' })
    },

    handleEdit(record) {
    },
    handleSub(record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    handleOk() {
      this.$refs.table.refresh()
    },

    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    }
  }
}
</script>
<style lang="less" scoped>
.expand_warning {
  margin: 16px 0;
  background-color: #fff0e7;
  border-radius: 4px;
}
</style>